<template>
  <div class="login-page">
    <div class="login-content">
      <a-tabs v-model:activeKey="activeKey" centered>
        <a-tab-pane key="account" tab="账号登录">
          <a-form
              :model="formState"
              name="basic"
              :wrapper-col="{ span: 24 }"
              :rules="rules"
              autocomplete="off"
              class="login-form"
              @finish="onFinish"
              @finishFailed="onFinishFailed"
          >
            <a-form-item name="username" class="username-input">
              <a-input v-model="formState.username" placeholder="请输入账号（guid）"/>
            </a-form-item>

            <a-form-item
                name="password"
            >
              <a-input-password v-model="formState.password" placeholder="请输入密码"/>
            </a-form-item>
            <a-form-item class="btn-wrapper">
              <a-button type="primary" html-type="submit" class="submit-btn">登录</a-button>
              <div class="register-wrapper">
                <router-link to="/register">免费注册</router-link>
              </div>
            </a-form-item>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="keyFile" tab="秘钥登录" force-render>
          <div class="key-import-login">
            <div class="import-tip">已导出密钥文件，可选择密钥登录。</div>
            <a-button type="primary" html-type="submit" class="submit-btn import-submit">点击导入密钥文件</a-button>
          </div>
        </a-tab-pane>
      </a-tabs>

      <div class="protocol-wrapper">
        <a-checkbox v-model:checked="agreeChecked"></a-checkbox>
        阅读并接受 <a>《服务条款》</a>和 <a>《隐私政策》</a>
      </div>
    </div>
    <p class="tip">
      <span>©Copyright</span>  2021 Bohan-IT 上海伯汉信息技术有限公司版权所有本站内容禁止擅自转载，复制，引用。
    </p>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";

const activeKey = ref('account')
const agreeChecked = ref(false)

const formState = reactive({
  username: "",
  password: "",
});

const rules = {
  username: [{ required: true, message: '账号必填' }],
  password: [{ required: true, message: '密码必填' }],
}

// 校验成功
function onFinish() {}

// 校验失败
function onFinishFailed() {}
</script>

<style lang="less" scoped>
.login-page{
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-60px);
  flex-direction: column;
  height: 100%;
}
.login-content{
  width: 400px;
  background: #FFFFFF;
  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.05);
  border-radius: 4px;
  padding: 24px;
  margin: 0 auto;
  .btn-wrapper :deep.ant-form-item-control{
    text-align: center;
  }
  .submit-btn{
    width: 100%;
    height: 40px;
    font-size: 16px;
    background: linear-gradient(270deg, #009496 0%, #00A098 55%, #00B09D 86%, #00C29F 100%);
    border-radius: 4px;
  }
  .login-form{
    padding: 24px 16px 0;
  }
  .register-wrapper{
    padding-top: 7px;
    text-align: right;
  }
  :deep(.ant-tabs-tab) {
    padding-top: 0;
    .ant-tabs-tab-btn{
      font-size: 22px;
      padding: 0 8px;
      position: relative;
      left: -4px;
    }
    & + .ant-tabs-tab{
      position: relative;
      left: 12px;
    }
  }
  :deep(.ant-tabs-ink-bar) {
    transform: translateX(-6px) ;
  }
  :deep(.ant-tabs-nav-list) {
    flex: 1;
    justify-content: space-around;
  }
  :deep(.ant-tabs-nav){
    margin-bottom: 0;
  }
  .username-input, .btn-wrapper{
    margin-bottom: 16px;
  }
}
.tip{
  color: #A2A6B2;
  text-align: center;
  margin-top: 40px;
}
.import-tip{
  font-size: 16px;
  padding: 68px 0;
  text-align: center;
}
.key-import-login{
  padding: 0 16px;
}
.protocol-wrapper{
  padding-left: 16px;
}
.import-submit{
  margin-bottom: 12px;
}
</style>
